<template>
    <div class="userinfo-address">
        <div class="item-lr bd address">
            <div class="left">所在区域</div>
            <div class="right" @click="chooseAddress()"><span>{{address}}</span><i class="iconfont">&#xe871;</i></div>
        </div>
        <div class="item-lr">
            <div class="left">详细地址</div>
            <div class="right"><input type="text" placeholder="请输入您的详细地址" v-model="text"></div>
        </div>
        <div class="address-container" v-if="pickerVisible">
            <v-distpicker type="mobile" @selected="selected"></v-distpicker>
        </div>
        <div @click="addsave()" class="authentication">保存</div>

    </div>
</template>

<script>
import Header from '../common/header';
import axios from 'axios';
import { MessageBox, Popup } from 'mint-ui';
import VDistpicker from 'v-distpicker';  
import { setTimeout } from 'timers';
export default {
    data () {
        return {
            text: '',
            pickerVisible: false,
            province: '',
            city: '',
            area: '',
            address: ''
        }
    },
    components: {
        'h-header': Header,
        'v-distpicker': VDistpicker,
    },
    mounted() {
        const vm = this;
        let url = window.location.href;
        vm.wxShare(url);
    },
    created () {
        const vm = this;
        axios.post('/Weixin/Member/memberDetail',{}).then(res=>{
            const data = res.data;
            // console.log(data);
            if(data.code==1){
                vm.address = data.data.address;
            }else {
                MessageBox.alert(data.msg)
            }
        }).catch(()=>{
            MessageBox.alert('网络错误');
        })
    },
    methods: {
        chooseAddress() {
            this.pickerVisible = true;
        },
        selected(val) {
            const vm = this;
            vm.pickerVisible = false;
            vm.province = val.province.value;
            vm.city = val.city.value;
            vm.area = val.area.value;
            vm.address =  vm.province+ vm.city + vm.area;
          
        },
        addsave(){
            const vm = this;
            vm.address = vm.address + vm.text;
            axios.post('/Weixin/Member/editMember', {address: vm.address}).then(res => {
                const data = res.data;
                if (data.code == 1) {
                    this.$toast(data.msg);
                    setTimeout(function(){
                    vm.$router.replace('/userinfo');
                    },500)
                }
                
            });
            
        }
    }
}
</script>

<style lang="scss">
    .address-container {
        position: fixed;
        /* top: 41px; */
        height: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        .address {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
        ul {
            li {
                padding: 10px !important;
                color: #333;
            }
        }
    }
   
</style>
